<!-- frontend/src/components/MedicalPanel.vue -->
<template>
  <div class="medical-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <h3>🏥 患者信息管理</h3>
      <!-- 关闭按钮已移除 -->
    </div>

    <!-- 面板内容 -->
    <div class="panel-content">
      <!-- 患者信息区 -->
      <div class="section patient-info-section">
        <h4>📝 患者基本信息</h4>
        <div class="patient-form">
          <div class="form-row">
            <div class="form-group">
              <label>姓名</label>
              <input v-model="patientInfo.name" type="text" placeholder="请输入患者姓名">
            </div>
            <div class="form-group">
              <label>年龄</label>
              <input v-model="patientInfo.age" type="text" placeholder="请输入年龄">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>性别</label>
              <select v-model="patientInfo.gender">
                <option value="">请选择</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label>病史摘要</label>
            <textarea v-model="patientInfo.history" rows="4" placeholder="请输入病史信息"></textarea>
          </div>
          <button class="btn primary" @click="updatePatientInfo" :disabled="updating">
            {{ updating ? '保存中...' : '保存患者信息' }}
          </button>
          <div v-if="saveStatus" class="status-message">{{ saveStatus }}</div>
        </div>
      </div>

      <!-- 使用说明区 -->
      <div class="section usage-section">
        <h4>💡 使用说明</h4>
        <div class="usage-content">
          <div class="usage-item">
            <span class="usage-icon">📷</span>
            <span class="usage-text">在中间区域上传医学影像</span>
          </div>
          <div class="usage-item">
            <span class="usage-icon">⚙️</span>
            <span class="usage-text">调整分析参数</span>
          </div>
          <div class="usage-item">
            <span class="usage-icon">🔍</span>
            <span class="usage-text">开始AI分析</span>
          </div>
          <div class="usage-item">
            <span class="usage-icon">📋</span>
            <span class="usage-text">生成诊疗报告</span>
          </div>
        </div>
      </div>

      <!-- 分析状态区 -->
      <div class="section status-section">
        <h4>📊 分析状态</h4>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">当前患者：</span>
            <span class="status-value">{{ patientInfo.name || '未填写' }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">分析次数：</span>
            <span class="status-value">{{ analysisCount }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">最后分析：</span>
            <span class="status-value">{{ lastAnalysisTime || '暂无' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useChatStore } from '@/stores/chat';
import { API_BASE_URL } from '@/config/api';

const store = useChatStore();

// 响应式数据 - 设置默认值
const patientInfo = reactive({
  name: '张三',
  age: '60',
  gender: '男',
  history: ''
});

const updating = ref(false);
const saveStatus = ref('');
const analysisCount = ref(0);
const lastAnalysisTime = ref('');

// 方法
const closePanel = () => {
  store.setShowMedicalPanel(false);
};

const updatePatientInfo = async () => {
  updating.value = true;
  saveStatus.value = '';
  
  try {
    const response = await fetch(`${API_BASE_URL}/api/medical/update-patient`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(patientInfo)
    });
    
    if (response.ok) {
      saveStatus.value = '患者信息已更新！';
      setTimeout(() => { saveStatus.value = ''; }, 3000);
    } else {
      saveStatus.value = '保存失败，请重试';
    }
  } catch (error) {
    console.error('保存患者信息失败:', error);
    saveStatus.value = '保存失败，请检查网络连接';
  } finally {
    updating.value = false;
  }
};

// 监听分析状态变化
const updateAnalysisStatus = () => {
  analysisCount.value++;
  lastAnalysisTime.value = new Date().toLocaleString('zh-CN');
};

// 暴露方法供父组件调用
defineExpose({
  updateAnalysisStatus
});
</script>

<style scoped>
.medical-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border-left: 1px solid var(--border);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--primary);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted-foreground);
  padding: 4px;
  border-radius: 4px;
}

.close-btn:hover {
  background: var(--muted);
}

/* .panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
} */

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  /* 添加以下优化滚动的样式 */
  max-height: calc(100vh - 80px); /* 确保有足够的滚动空间 */
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
  scrollbar-width: thin; /* Firefox 滚动条样式 */
  scrollbar-color: var(--primary) var(--muted); /* Firefox 滚动条颜色 */
}

/* 添加自定义滚动条样式以确保在所有浏览器中都能清晰看到 */
.panel-content::-webkit-scrollbar {
  width: 6px;
}

.panel-content::-webkit-scrollbar-track {
  background: var(--muted);
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--primary-foreground);
}

.section {
  margin-bottom: 20px;
  background: var(--card);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border);
}

.section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--foreground);
}

.patient-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  gap: 8px;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--foreground);
  font-size: 12px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--background);
  color: var(--foreground);
  font-size: 12px;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.status-message {
  font-size: 12px;
  color: var(--primary);
  margin-top: 8px;
}

.usage-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usage-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--muted);
  border-radius: 4px;
}

.usage-icon {
  font-size: 16px;
}

.usage-text {
  font-size: 12px;
  color: var(--foreground);
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.status-item:last-child {
  border-bottom: none;
}

.status-label {
  font-size: 12px;
  color: var(--muted-foreground);
}

.status-value {
  font-size: 12px;
  color: var(--foreground);
  font-weight: 500;
}

.btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn.primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn.primary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>